<template>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="proid" label="商品编号" width="120" />
        <el-table-column label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img1">
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="商品名称" width="120" />
        <el-table-column prop="brand" label="品牌" width="80" />
        <el-table-column prop="originprice" label="价格" width="100" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column label="是否推荐">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0"
                    @change="fun(scope.row.proid, scope.row.isrecommend)" />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" />
</template>

<script setup lang="ts">

import { reactive, ref } from "vue";
import service from "../../../ulit/service";

// 定义查询的结果（表格里的数据）
interface Igood {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proname: string,
    sales: number,
    stock: number,

    proid: string,
    type: string,
    flag: string,
}
const list = reactive<Igood[]>([])

const params = reactive<{
    type: string,
    flag: number
}>({
    type: "isrecommend",
    flag: 1
})

const searchfun = () => {
    service({
        url: "/pro/showdata",
        method: 'post',
        data: params
    }).then(res => {
        if (res.data.code === '200') {
            total.value = res.data.total;
            // console.log(res.data);
            list.length = 0
            list.push(...res.data.data)
        }
    })
}
searchfun()
//获取
const fun = (proid: string, flag: string) => {
    service({
        url: "pro/updateFlag",
        method: 'post',
        data: {
            proid,
            flag,
            type: 'isrecommend'
        }
    }).then(res => {
        if (res.data.code === '200') {
            console.log(res.data);
            list.length = 0
            list.push(...res.data.data)
        }
    })
}









// 分页的数据
const params1 = reactive<{
    count: number,
    limitNum: number
}>({
    count: 1,
    limitNum: 12
})
const total = ref(0);

const changePage = (value: number) => {
    params1.count = value
    searchfun()
}
</script>

<style scoped>
img {
    width: 100px;
    height: 75px;
}
</style>